<template>
	<view class="classIfyPage">
		<view class="status_bar" :style="'height:' + menuHeight + 'px'"><!-- 这里是状态栏 --></view>
		<view class="pageTitle">
			<view class="back_btn" @tap="backPage">
				<image class="icon-36" src="../../static/images/icon/icon_back_left.png" mode=""></image>
			</view>
			<view class="centerTitle">{{ clsObj.name }}</view>
			<view></view>
		</view>
		<view class="search_box" @tap="goLink('/pages/shop/shopSearchPage')">
			<view class="left_search_box">
				<view class="search_icon">
					<image src="../../static/images/icon/icon_search.png" class="icon-32" mode=""></image>
				</view>
				<view class="search_input">请输入搜索内容</view>
			</view>
			<view class="search_btn"><button>搜索</button></view>
		</view>
		<view class="carousel_box">
			<Carousel :val="bannerObj" @swiperClick="swiperClick"></Carousel>
		</view>
		<view class="list">
			<GoodsList :list="goodsList.lists"></GoodsList>
			<u-loadmore :status="loadMoreStatus" v-if="goodsList.lists.length" />
		</view>
		<view class="fix_bottom_box">
			<view class="fix_bottom_menu_item" v-for="(item, index) in fix_bottom_menu" :key="index"
				@tap="fixMenuTap(item.name)">
				<image :class="item.iconSize ? item.iconSize : 'icon-60'" :src="item.icon" mode=""></image>
				<view class="menu_item_name">{{ item.name }}</view>
			</view>
		</view>
		<ShopingCar ref="shopingCar"></ShopingCar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import com from '../../mixin/index.js';
	import Carousel from '../../components/carousel/Carousel.vue';
	import GoodsList from '../../components/goodsList/goodsList.vue';
	import ShopingCar from '../../components/shopingCar/shopingCar.vue';
	export default {
		mixins: [com],
		components: {
			GoodsList,
			Carousel,
			ShopingCar
		},
		data() {
			return {
				pageTitle: '',
				clsObj: {},
				bannerObj: {
					list: [],
					height: '270rpx',
					radius: '10rpx'
				},
				type: '',
				fix_bottom_menu: [{
						name: '首页',
						icon: require('../../static/images/footer/footer_shop.png')
					},
					{
						name: '购物车',
						icon: require('../../static/images/footer/footer_shoping_car.png'),
						iconSize: 'icon-50'
					},
					{
						name: '我的',
						icon: require('../../static/images/footer/icon_mine.png')
					}
				]
			};
		},
		computed: {
			...mapGetters(['totalGoodsNum', 'totalPrice'])
		},
		onLoad(val) {
			if (val.clsObj) {
				this.clsObj = JSON.parse(val.clsObj);
				this.type = val.type;
				let params = {
					team_id: uni.getStorageSync('cur_address_point').id
				};
				params[this.type] = this.clsObj.id;
				console.log(params, '参数', val);
				this.bannerObj.list = uni.getStorageSync('category_banner');
				this.getProductList(params);
			}
			if (val.type == 'team_active_id') {
				this.bannerObj.list = [this.clsObj.top_image];
			}
		},
		onPullDownRefresh() {
			this.page.page = 1;
			this.goodsList = {
				lists: [],
				total: 1,
				total_page: 0
			};
			let params = {
				team_id: uni.getStorageSync('cur_address_point').id
			};
			params[this.type] = this.clsObj.id;
			this.getProductList(params).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			let params = {
				team_id: uni.getStorageSync('cur_address_point').id
			};
			params[this.type] = this.clsObj.id;
			this.getProductList(params);
		},
		methods: {
			backPage() {
				uni.navigateBack();
			},
			goShopDetails(id) {
				uni.navigateTo({
					url: `/pages/shop/shopDetails?product_id=${id}&addressId=${this.curAddressGetPoint.id}`
				});
			},
			fixMenuTap(name) {
				switch (name) {
					case '首页':
						uni.switchTab({
							url: '/pages/shop/shop'
						});
						break;
					case '购物车':
						if (this.totalGoodsNum) {
							this.$refs.shopingCar.shopingCarShow = true;
						} else {
							this.$helper.toast('购物车是空的!');
						}
						break;
					case '我的':
						uni.switchTab({
							url: '/pages/mine/mine'
						});
						break;
				}
			},
			swiperClick(val) {
				let clickType = this.bannerObj.list[val];
				console.log(clickType, '点击你几个我爱唯欧你');
				switch (clickType.type) {
					case 'none':
						break;
					case 'team':
						this.goShopDetails(clickType.third_id);
						break;
					case 'tour':
						uni.navigateTo({
							url: `/pages/travel/travelDetails?tour_id=${clickType.third_id}`
						});
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	.classIfyPage {
		background-color: #f9f9f9;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 24rpx;

		.status_bar {}

		.pageTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0rpx;
			margin-bottom: 30rpx;

			.back_btn {}

			.centerTitle {
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.search_box {
			height: 68rpx;
			background: #ffffff;
			border-radius: 34rpx;
			border: 2rpx solid #fed100;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.left_search_box {
				padding-left: 18rpx;
				display: flex;
				align-items: center;

				.search_icon {
					margin-right: 4rpx;
				}

				.search_input {
					color: #a7a7a7;
					font-size: 26rpx;
				}
			}

			.search_btn {
				button {
					width: 120rpx;
					height: 68rpx;
					background: #fed100;
					font-size: 26rpx;
					border-radius: 34rpx;
				}
			}
		}

		.carousel_box {
			margin-bottom: 30rpx;
		}

		.list {}

		.fix_bottom_box {
			display: flex;
			align-items: center;
			position: fixed;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			border-top: 1rpx solid #f9f9f9;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 0 50rpx;
			justify-content: space-between;

			.fix_bottom_menu_item {
				display: flex;
				align-items: center;
			}

			.menu_item_name {
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>